<template>
  <span>
    <InputTextArea :value="title" @click="openModal" :placeholder="placeholder"/>
    <FormulaEditorModal @ok="handleOK" :flow-model="flowModel" :service="service"
                        :value="value" ref="FormulaEditorModal"/>
  </span>
</template>
<script>
import {Input} from 'ant-design-vue';
import {createProps} from '@/utils';
import FormulaEditorModal from '@/components/FormulaEditor/FormulaEditorModal.vue';

export default {
  name: 'FormulaEditor',
  props: {
    placeholder: createProps(String),
    title: createProps(String),
    value: createProps(String),
    flowModel: createProps(Object),
    service: createProps(Function),
  },
  components: {
    FormulaEditorModal,
    InputTextArea: Input.TextArea
  },
  methods: {
    openModal() {
      this.$refs.FormulaEditorModal.open();
    },
    handleOK(obj) {
      const {title, value} = obj;
      this.$emit('update:title', title);
      this.$emit('update:value', value);
    },
  }
};
</script>